<script setup lang="jsx">
import { computed, reactive, ref } from 'vue';
import { useElementSize } from '@vueuse/core';
import { DeleteOutlined, DownloadOutlined, EditOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons-vue';
import useResetTableRef from '@/hooks/common/resetTableRef';

import useSearchData from '@/hooks/common/searchData';

import { vcpget, vcppost } from '@/service/api/modules/erp';

const [searchParams, resetSearchParams] = useResetTableRef({
  pageNum: 1,
  pageSize: 200,
  techId: null,
  moduleNo: null,
  lotNo: null
  // techName: null
});
const tableRefs = ref(null);
const tableRef = ref(null);
const searchData = useSearchData(searchParams);
const tableData = ref([]);
const searchFormList = [
  {
    type: 'input',
    key: 'lotNo',
    label: 'LOT号',
    span: 24,
    md: 12,
    lg: 10,
    xl: 5,
    xxl: 5,
    placeholder: '请输入LOT号',
    showTime: true
  },
  {
    type: 'input',
    key: 'moduleNo',
    label: '生产型号',
    span: 24,
    md: 12,
    lg: 10,
    xl: 5,
    xxl: 5,
    placeholder: '请输入料号',
    showTime: true
  }
  // {
  //   type: 'input',
  //   key: 'techId',
  //   label: '工艺名称',
  //   span: 24,
  //   md: 12,
  //   lg: 10,
  //   xl: 5,
  //   xxl: 5,
  //   placeholder: '请输入料号',
  //   showTime: true
  // }
  // {
  //   type: 'select',
  //   key: 'state',
  //   selectOptions: [
  //     {
  //       label: '量产',
  //       value: '1'
  //     },
  //     {
  //       label: '样品',
  //       value: '2'
  //     }
  //   ],
  //   label: '生产类别',
  //   span: 24,
  //   md: 12,
  //   lg: 10,
  //   xl: 5,
  //   xxl: 5,
  //   placeholder: '请选择生产类别',
  //   showTime: true
  // }
];

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const selectedRowKeys = ref([]);
const detailsVisible = ref(false);
const detailsVisibleZyd = ref(false);
const detailsVisibleFrom = ref(false);
const formState = ref({});
const addDatas = ref({});
const isLogin = ref(true);
const loginDatas = ref('');
function search() {
  getData();
}
function handleSearch() {
  detailsVisibleZyd.value = true;
  resetSearchParams();
  getData();
}
const formList = [
  {
    type: 'input',
    key: 'state',
    label: '状态',
    placeholder: '请选择状态',
    span: 24
  },
  {
    type: 'input',
    key: 'mktAllowed',
    label: 'mkt可投产',
    placeholder: '请选择是否mkt可投产',
    span: 24
  }
];
const formListEidt = [
  {
    type: 'input',
    key: 'lotNo',
    label: 'LOT号',
    placeholder: '请选择状态',
    suffixSlot: <SearchOutlined class="cursor-pointer" onClick={() => handleSearch()} />,
    span: 12
  },
  {
    type: 'input',
    key: 'zh',
    label: '过数账号',
    className: 'data-cell',

    span: 6
  },
  {
    type: 'input',
    key: 'passBy',
    className: 'data-cell',
    label: '过数人',
    span: 6
  }
];
const formListEidtTwo = [
  {
    type: 'input',
    key: 'fullProdNo',
    label: '生产型号',
    placeholder: '请选择状态',
    span: 8
  },
  {
    type: 'span',
    key: 'state',
    label: '',

    span: 8
  },
  {
    type: 'span',
    key: 'state',
    label: '',

    span: 8
  },
  // {
  //   type: 'input',
  //   key: 'mktAllowed',
  //   label: '客户型号',

  //   span: 8
  // },
  // {
  //   type: 'span',
  //   key: 'state',
  //   label: '',

  //   span: 8
  // },
  // {
  //   type: 'span',
  //   key: 'state',
  //   label: '',

  //   span: 8
  // },
  // {
  //   type: 'input',
  //   key: 'mktAllowed',
  //   label: '生产交期',

  //   span: 8
  // },
  {
    type: 'input',
    key: 'wipQty',
    label: '投产数量',

    span: 8
  },
  {
    type: 'input',
    key: 'scrapQty',
    label: '报废数量',

    span: 8
  },
  {
    type: 'input',
    key: 'lotNo',
    label: '工单号码',

    span: 8
  },
  // {
  //   type: 'span',
  //   key: 'state',
  //   label: '',

  //   span: 8
  // },
  // {
  //   type: 'span',
  //   key: 'state',
  //   label: '',

  //   span: 8
  // },
  {
    type: 'input',
    key: 'pnlQty',
    label: '结存PNL',

    span: 6
  },
  {
    type: 'input',
    key: 'setQty',
    label: '结存SET',

    span: 6
  },
  {
    type: 'input',
    key: 'pnlSet',
    label: 'pnl=?set',

    span: 6
  },
  {
    type: 'input',
    key: 'setPcs',
    label: 'set=?pcs',

    span: 6
  },
  {
    type: 'input',
    key: 'techName',
    // label: '结存工序',
    labelSlot: (
      <span
        style="color:red; font-weight: 700;
          font-size: 18px;"
      >
        结存工序
      </span>
    ),
    className: 'data-cell',

    span: 8
  },
  {
    type: 'input',
    key: 'pcsQty',
    label: '结存PCS',

    span: 8
  },
  // {
  //   type: 'input',
  //   key: 'mktAllowed',
  //   label: '报废特性',

  //   span: 8
  // },
  {
    type: 'input',
    key: 'jsgx',
    // label: '接收工序',
    labelSlot: (
      <span
        style="color:red; font-weight: 700;
          font-size: 18px;"
      >
        接收工序
      </span>
    ),
    className: 'data-cell',

    span: 8
  },
  {
    type: 'input',
    key: 'mktAllowed',
    // label: '接收SETS',
    labelSlot: (
      <span
        style="color:red; font-weight: 700;
          font-size: 18px;"
      >
        接收SETS
      </span>
    ),
    className: 'data-cell',

    span: 8
  },
  {
    type: 'input',
    key: 'mktAllowed',
    // label: '接收PCS',
    labelSlot: (
      <span
        style="color:red; font-weight: 700;
          font-size: 18px;"
      >
        接收PCS
      </span>
    ),
    className: 'data-cell',

    span: 8
  }
];
const columns2 = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 80,
    align: 'center',
    checked: true
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: 'LOT号',

    align: 'center',
    width: 160,
    checked: true
  },

  {
    key: 'fullProdNo',
    dataIndex: 'fullProdNo',
    title: '生产型号',

    align: 'center',
    checked: true,
    width: 160
  },
  // {
  //   key: 'prodNo',
  //   dataIndex: 'prodNo',
  //   title: '客户型号',
  //
  //   align: 'center',
  //   checked: true,
  //   width: 100
  // },
  {
    key: 'techName',
    dataIndex: 'techName',
    title: '工艺名称',

    align: 'center',
    checked: true,
    width: 160
  },
  {
    key: 'pcsQty',
    dataIndex: 'pcsQty',
    title: '结存PCS数',

    align: 'center',
    checked: true,
    width: 110
  },
  {
    key: 'setQty',
    dataIndex: 'setQty',
    title: '结存SET数',
    align: 'center',
    checked: true,
    width: 110
  },
  {
    key: 'pnlQty',
    dataIndex: 'pnlQty',
    title: '结存PNL数',

    align: 'center',
    checked: true,
    width: 110
  },
  // {
  //   key: 'custProdNoAdd',
  //   dataIndex: 'custProdNoAdd',
  //   title: '报废特性',
  //
  //   align: 'center',
  //   checked: true,
  //   width: 100
  // },
  {
    key: 'pnlSet',
    dataIndex: 'pnlSet',
    title: 'pnl=?set',

    align: 'center',
    checked: true
  },
  {
    key: 'setPcs',
    dataIndex: 'setPcs',
    title: 'set=?pcs',

    align: 'center',
    checked: true
  },
  {
    key: 'custProdNoAdd',
    dataIndex: 'custProdNoAdd',
    title: 'pnl=?pcs',
    customRender: ({ record }) => {
      return record.setPcs * record.pnlSet;
    },
    align: 'center',
    checked: true
  }
]);
const formListEidtThe = [
  // {
  //   type: 'input',
  //   key: 'mktAllowed',
  //   label: '包装结存数量',
  //   span: 12
  // },
  // {
  //   type: 'input',
  //   key: 'mktAllowed',
  //   label: '过账数量',
  //   span: 12
  // }
];
const userName = ref('');
function getLogins(val) {
  if (formState.value) {
    vcppost('/auth/passlogin', formState.value).then(({ data, error }) => {
      if (!error) {
        console.log(data);
        if (val != 1) {
          window.$message?.success('登录成功');
          isLogin.value = false;
        }

        userName.value = data;
        addDatas.value.passBy = data;
        addDatas.value.zh = formState.value.username;
      }
    });
  } else {
    window.$message?.error('登录失败');
  }
}
function getGuoZang() {
  if (addDatas.value) {
    vcppost('/erpsyncmes/wip/passLot', addDatas.value).then(({ data, error }) => {
      if (!error) {
        window.$message?.success('过数成功');
        addDatas.value = {};
        getData();
        getLogins(1);
      }
    });
  } else {
    window.$message?.error('请选择过数数据');
  }
}

function getData() {
  vcpget('/erpsyncmes/wip/selectWipByModuleNoAndTechId', searchParams.value).then(({ data, error }) => {
    if (!error) {
      data.pageInfo.list.forEach((item, index) => {
        item.index = index + 1;
      });
      data.myMap.forEach((item, index) => {
        item.index = index + 1;
      });

      tableData.value = data.pageInfo.list;
    }
  });
}
function handlePageChange(pageNum, pageSize) {
  searchParams.value.pageNum = pageNum;
  searchParams.value.pageSize = pageSize;
  getData();
}
function tableRowClick(val) {
  addDatas.value = val;
  addDatas.value.passBy = userName.value;
  addDatas.value.zh = formState.value.username;

  vcppost('/erpsyncmes/wip/findTechName', val).then(({ data, error }) => {
    if (!error) {
      console.log(data);
      if (data) {
        addDatas.value.jsgx = data.data;
      } else {
        addDatas.value.jsgx = '';
      }
    }
  });
}
function reset() {
  resetSearchParams();
  search();
}
function isClear() {
  console.log(123);
  // detailsVisible.value = true;
}
function getLogin() {
  detailsVisible.value = false;
  detailsVisibleFrom.value = true;
}
</script>

<template>
  <div>
    <div v-show="isLogin" class="login-page-container">
      <div class="login-form-wrapper">
        <header class="flex-center flex-y-center">
          <SystemLogo class="mb-5 mr-5 text-64px text-primary lt-sm:text-48px" />
          <h3 class="mb-5 text-26px text-primary font-500 lt-sm:text-22px">金禄MES</h3>
        </header>
        <AForm :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" autocomplete="off">
          <AFormItem label="账号" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
            <AInput v-model:value="formState.username" placeholder="请输入账号" />
          </AFormItem>

          <AFormItem label="密码" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
            <AInputPassword v-model:value="formState.password" placeholder="请输入密码" />
          </AFormItem>
          <AFormItem :wrapper-col="{ offset: 6, span: 16 }">
            <AButton type="primary" html-type="submit" @click="getLogins">登录</AButton>
          </AFormItem>
        </AForm>
      </div>
    </div>
    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
      <Modal
        v-model:visible="detailsVisible"
        :destroy-on-close="false"
        :centered="false"
        :mask="true"
        title="登录账号"
        width="600px"
        height="500px"
        @close="isClear"
      >
        <div class="event-form">
          <Form v-model:model="loginDatas" :form-list="formList"></Form>
        </div>
        <template #footer>
          <div class="modal-footer" style="width: 60%; margin: 0 auto">
            <!-- <AButton @click="detailsVisible = false">关闭</AButton> -->

            <!-- <AButton @click="getLogin">登录</AButton> -->
          </div>
        </template>
      </Modal>
      <div>
        <ARow :gutter="6" style="margin-bottom: 20px; margin-top: 20px">
          <ACol :span="4"></ACol>
          <ACol :span="16">
            <ACard class="top-card" title="条码扫码">
              <Form v-model:model="addDatas" :form-list="formListEidt"></Form>
            </ACard>
          </ACol>
        </ARow>
        <ARow :gutter="6">
          <ACol :span="4"></ACol>
          <ACol :span="16">
            <ACard class="top-card" title="流程卡信息">
              <Form v-model:model="addDatas" :form-list="formListEidtTwo"></Form>

              <AButton style="margin-left: 50%" @click="getGuoZang">确定</AButton>
            </ACard>
          </ACol>
        </ARow>
        <!-- <ARow :gutter="6"></ARow> -->
      </div>
      <!--  -->
      <div>
        <Modal
          v-model:visible="detailsVisibleZyd"
          :destroy-on-close="false"
          :centered="false"
          title="查询LOT号信息"
          width="1400px"
          height="600px"
        >
          <CommonSearch
            v-model:searchParams="searchParams"
            :form-list="searchFormList"
            @search="search"
            @reset="reset"
          ></CommonSearch>

          <Table
            ref="tableRefs"
            v-model:searchParams="searchData"
            :column="columns2"
            :show-row-selection="false"
            :show-card-header="false"
            :auto-generate-uuid="false"
            row-key="wipId"
            :scroll="{ y: 'auto' }"
            is-init-get-data
            :data-source="tableData"
            @table-row-click="tableRowClick"
            @pagination-change="handlePageChange"
          ></Table>

          <template #footer>
            <div style="display: flex">
              <div style="width: 40%; margin-left: 5%; margin-top: 0.5%; margin-right: 20px">
                <Form v-model:model="addDatas" :form-list="formListEidtThe"></Form>
              </div>
              <div>
                <AButton @click="detailsVisibleZyd = false">关闭</AButton>

                <!-- <AButton @click="getGuoZang">过账</AButton> -->
              </div>
            </div>
          </template>
        </Modal>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.row-red-background {
  background-color: rgba(244, 56, 56, 0.7) !important; /* !important 可能需要以确保覆盖其他样式 */
}
.expired {
  color: red;
  font-weight: bold;
  font-size: larger;
}
.top-card {
  .ant-card-head {
    min-height: 40px;
  }
}
:deep(.surely-table-wrapper) {
  &.has-footer-table {
    .ant-spin-nested-loading {
      .ant-spin-container {
        .surely-table {
          height: calc(100% - 40px - v-bind('footerHeight')) !important;
        }
      }
    }
  }
}
.login-page-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 浅灰色背景 */
  z-index: 10000;
}

.login-form-wrapper {
  background-color: #ffffff; /* 白色背景 */
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  width: 360px; /* 固定宽度，可以根据需要调整 */
  margin-right: 11%;
  margin-bottom: 11%;
}

.ant-form-item {
  margin-bottom: 20px; /* 表单项之间的间距 */
}

.ant-form-item-label {
  font-weight: bold; /* 标签字体加粗 */
}

.ant-input,
.ant-input-password {
  width: 100%; /* 输入框占满父容器宽度 */
  padding: 5px;
  border: 1px solid #d9d9d9; /* 边框颜色 */
  border-radius: 4px;
  box-sizing: border-box; /* 包括内边距和边框在内计算宽度 */
}

.ant-checkbox {
  margin-left: 0; /* 取消默认的左边距 */
}

.ant-btn-primary {
  width: 100%; /* 登录按钮占满父容器宽度 */
  background-color: #1890ff; /* 蓝色背景 */
  border-color: #1890ff; /* 蓝色边框 */
  color: #ffffff; /* 白色文字 */
  font-size: 16px; /* 字体大小 */
  border-radius: 4px;
  padding: 2px;
  cursor: pointer; /* 鼠标悬停时显示为手型 */
}

.ant-btn-primary:hover {
  background-color: #40a9ff; /* 悬停时的背景颜色 */
  border-color: #40a9ff; /* 悬停时的边框颜色 */
}
:deep(.data-cell) {
  &.ant-input {
    color: red !important; /* 设置字体颜色为蓝色 */
    font-weight: 600; /* 普通字体 */
    font-size: larger;
  }
}
</style>
